<template>
  <div class="sport-dashboard">
    <div class="dashboard-header">
      <CheckinCard />
      <StatsCards :distance="distance" :duration="duration" :calories="calories" :heartRate="heartRate" />
    </div>
    <div class="dashboard-main">
      <div class="main-left">
        <RealTimeData @realtime-update="handleRealtimeUpdate" />
      </div>
      <div class="main-right">
        <WeightRecord />
        <FoodRecord />
      </div>
    </div>
    <div class="dashboard-footer">
      <CalorieCompare />
    </div>
    <SportRecord />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CheckinCard from '../components/CheckinCard.vue'
import StatsCards from '../components/StatsCards.vue'
import RealTimeData from '../components/RealTimeData.vue'
import WeightRecord from '../components/WeightRecord.vue'
import FoodRecord from '../components/FoodRecord.vue'
import CalorieCompare from '../components/CalorieCompare.vue'
import SportRecord from '../components/SportRecord.vue'

const distance = ref(0)
const duration = ref(0)
const calories = ref(0)
const heartRate = ref(0) // 预留，后续可接入设备

function handleRealtimeUpdate({ distance: d, duration: t, calories: c, heartRate: h }) {
  distance.value = d
  duration.value = t
  calories.value = c
  if (h !== undefined) heartRate.value = h
}
</script>

<style scoped>
.sport-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  padding: 24px;
}
.dashboard-header {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.dashboard-main {
  display: flex;
  gap: 24px;
}
.main-left {
  flex: 2;
}
.main-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dashboard-footer {
  margin-top: 32px;
}
</style> 